<template>
  <el-dialog title="节目编辑" width="800px" v-model="dialogFormVisible">
    <el-form :model="form" size="small">
      <el-form-item label="节目名称" :label-width="formLabelWidth">
        <el-input v-model="form.program_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="排序" :label-width="formLabelWidth">
        <el-input v-model="form.program_sort" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="区域" :label-width="formLabelWidth">
        <div class="form-area-container">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item
              v-for="(area, index) in form.area_list"
              :key="index"
              :title="area.title"
              :name="index"
            >
              <el-form-item label="播放类型" :label-width="formLabelWidth_area">
                <el-select v-model="form.file_type" placeholder="请选类型">
                  <el-option label="字幕" :value="1"></el-option>
                  <el-option label="图片" :value="2"></el-option>
                  <el-option label="视频" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="宽度" :label-width="formLabelWidth_area">
                    <el-input
                      v-model="form.program_name"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="高度" :label-width="formLabelWidth_area">
                    <el-input
                      v-model="form.program_name"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="横坐标"
                    :label-width="formLabelWidth_area"
                  >
                    <el-input
                      v-model="form.program_name"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="纵坐标"
                    :label-width="formLabelWidth_area"
                  >
                    <el-input
                      v-model="form.program_name"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="播放列表" :label-width="formLabelWidth_area">
                <div class="play-list-container">
                  <div class="item" v-for="(play, num) in area" :key="num">
                    <div>图片</div>
                    <i class="el-icon-delete" circle size="mini"></i>
                  </div>
                </div>
                <div class="play-form-container">
                  <el-form-item
                    label="文件名称"
                    :label-width="formLabelWidth_area"
                    size="mini"
                  >
                    <el-input v-model="file_name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="文件" :label-width="formLabelWidth_area">
                    <el-button
                      size="mini"
                      icon="el-icon-folder"
                      @click="openResources"
                      >选择资源</el-button
                    >
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth_area">
                    <el-button size="mini">取消</el-button>
                    <el-button size="mini" type="primary">添加</el-button>
                  </el-form-item>
                </div>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
          <div class="pt10">
            <el-button type="primary" icon="el-icon-plus" plain @click="addArea"
              >添加区域</el-button
            >
          </div>
        </div>
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input
          type="textarea"
          v-model="form.business_describe"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="cancelFunc()">取 消</el-button>
        <el-button size="small" type="primary" @click="confirmFunc()"
          >确 定</el-button
        >
      </span>
    </template>

    <!--选择资源-->
    <Resources :visible="resourcesVisible" @close="closeResources"></Resources>
  </el-dialog>
</template>

<script>
import Resources from "./Resources.vue";
export default {
  components: {
    Resources,
  },
  data() {
    return {
      //是否显示
      dialogFormVisible: false,
      //表单数据
      form: {
        //节目名称
        program_name: "",
        //排序
        program_sort: 100,
        //区域列表
        area_list: [
          {
            title: "区域1",
            play_list: [],
          },
        ],
      },
      //文件名称
      file_name: "",
      //左边标签宽度
      formLabelWidth: "120px",
      //区域左边标签宽度
      formLabelWidth_area: "80px",
      //当前
      activeNames: ["1"],
      //打开选择资源
      resourcesVisible: false,
    };
  },
  props: {
    visible: Boolean,
  },
  watch: {
    //监听是否显示
    visible(newVal, oldVal) {
      if (newVal != oldVal) {
        this.dialogFormVisible = newVal;
      }
    },
  },
  created() {},
  methods: {
    /**
     * 区域改变
     */
    handleChange(val) {
      console.log(val);
    },

    /**
     * 添加区域
     */
    addArea() {
      const i = this.form.area_list.length + 1;
      this.form.area_list.push({ title: "区域" + i });
    },

    /**
     * 打开资源列表
     */
    openResources() {
      this.resourcesVisible = true;
    },

    /**
     * 关闭资源列表
     */
    closeResources() {
      this.resourcesVisible = false;
    },

    /**
     * 确认
     */
    confirmFunc() {
      this.$message({
        type: "success",
        message: "操作成功!",
      });
      this.cancelFunc();
    },

    /**
     * 取消
     */
    cancelFunc() {
      this.$emit("close", false);
    },
  },
};
</script>

<style lang="scss">
.form-area-container {
  padding: 10px 20px;
  border: 1px solid #b3d8ff;
  .el-collapse-item__header {
    color: $main_color;
    font-weight: bold;
  }
  .play-list-container {
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #ecf5ff;
    }
  }
  .play-form-container {
    padding: 20px;
    border: 1px solid #b3d8ff;
  }
}
</style>